<template>
    <el-dialog :title="title" class="addCityArea" width="380px" :visible.sync="isDial" :before-close='closeDialog'>
    <el-form :model="form" size="mini" :rules="rules" ref="ruleForm">
        <el-form-item label="商圈名称" prop="name" :label-width="formLabelWidth">
          <el-input size="mini"  class="leftBorder" v-model="form.name" :maxlength="10" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="所属类别" prop="type" :label-width="formLabelWidth">
          <el-input size="mini" :disabled="true" v-model="form.type" autocomplete="off"  style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="排序序号" prop='sortNum' :label-width="formLabelWidth">
            <el-input size="mini" v-model="form.sortNum" :maxlength="3" autocomplete="off"  style="width:200px"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="saveCityArea">保 存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
    data(){
        return{
            form:{
                name:"",   //商圈名称
                type:'',   //所属类别
                sortNum:'',//排序序号
            },
            rules: {
                name: [{
                    pattern: /^[\s\S]*.*[^\s][\s\S]*$/,
                    required: true,
                    message: '商圈名称不能为空',
                    trigger: 'blur'
                }],
            },
            formLabelWidth:'80px',
            isDial:false,
            title:"添加商圈",
            parentdata:'',
            row:''
        }
    },
    created(){
        let that = this;
        this.$root.$on("addCityArea", (type,data,row) => {
            that.isDial = true;
            // console.log(data,row)
            let form=that.form
            form.type=data.label
            if(type=='edit'){
                that.title='编辑商圈'
                form.name=row.name
                form.sortNum=row.sort
                this.row=row
            }else{
                that.title='添加商圈'
            }
            that.parentdata=data
        });
    },
    methods:{
        saveCityArea(){
            let that=this
            this.$refs.ruleForm.validate(valid => {
                // console.log(that.form)
                let obj={
                    parentId:that.parentdata.id,
                    name:that.form.name,
                    sort:that.form.sortNum
                }
                let url='city/area'
                let met='POST'
                if(that.title=='编辑商圈'){
                    met='PUT'
                    obj.id=that.row.id
                    url='city/area'
                }
                request.ajaxPost({
                    url,
                    that,
                    type:met,
                    params:obj,
                    fn(res) {
                        that.isDial = false;
                        that.$root.$emit("saveCityArea",'no')
                        that.resetForm()
                    }
                });
            })
        },
        closeDialog(){
            this.isDial=false
            this.resetForm("ruleForm");
        },
        resetForm() {
            this.$refs['ruleForm'].resetFields();
        },
    }
}
</script>
<style lang="less" scoped>
.addCityArea{
    text-align: left;
}
</style>


